<template>
  <div class="resume">
    <header>
      <div class="header_background"></div>
        <div class="header_wrapper" v-if="initData.user_info">
          <img :src="initData.user_info.photo_url" alt="">
        </div>
        <div class="desc" v-if="initData.user_info">
          <div>{{initData.user_info.realname}}</div>
          <div>{{sex}}|{{initData.age}}岁</div>
        </div>
    </header>

    <!-- 求职意向 -->
    <div class="wantResume">
      <div class="tit">
        <div class="baseResume_left">
          <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/recruit/icon/want.png" alt="" >
          <div>求职意向</div>
        </div>
      </div>
      <div class="list">
          <div class="list_item">
            <div><span>求职状态</span> <span>{{initData.job_status}}</span></div>
          </div>
          <div class="list_item">
            <div><span>工作性质</span> <span>{{initData.expected_salary_type}}</span></div>
          </div>
          <div class="list_item">
            <div><span>期待薪资</span> <span>{{initData.expected_salary}}元</span></div>
          </div>
          <!-- <div class="list_item">
            <div><span>期望行业</span> <span>初中</span></div>
          </div> -->
          <div class="list_item">
            <div><span>期望职位</span> <span>{{initData.job_name}}</span></div>
          </div>
          <div class="list_item">
            <div><span>工作地区</span> <span>{{initData.province}}</span></div>
          </div>
      </div>
    </div>
    <!-- 求职意向结尾 -->

    <!-- 联系方式 -->
    <div class="concat">
      <div class="tit">
        <div class="baseResume_left">
        <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/recruit/icon/baseResume.png" alt="" >
        <div>联系方式</div>
        </div>
      </div>
      <div class="list">
          <div class="list_item">
            <div><span>手机</span> <span>{{initData.phone}}</span></div>
          </div>
          <div class="list_item" v-if="initData.email&& initData.email!=null">
            <div><span>邮箱</span> <span>{{initData.email}}</span></div>
          </div>
          <div class="list_item" v-if="initData.wx && initData.wx!=null">
            <div><span>微信号码</span> <span>{{initData.wx}}</span></div>
          </div>
      </div>
    </div>
    <!-- 联系方式结尾 -->

    <!-- 特长标签 -->
      <div class="wantResume" v-if="initData.label">
          <div class="tit">
            <div class="baseResume_left">
            <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/recruit/icon/baseResume.png" alt="" >
            <div>特长标签</div>
            </div>
          </div>
          <div class="abilityList" >
            <div v-for="(item,index) of initData.label" :key="index">{{item.name}}</div>
          </div>
        </div>
    <!-- 特长标签结尾 -->

    <!-- 自我描述 -->
    <div class="desResume" v-if="initData.desc && initData.desc!=null">
      <div class="tit">
        <div class="baseResume_left">
        <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/recruit/icon/baseResume.png" alt="" >
        <div>自我描述 </div>
        </div>
      </div>
      <div class="desResume_item">
            {{initData.desc}}
          </div>
    </div>
    <!-- 自我描述结束 -->

    <!-- 教育经历 -->
    <div class="eduResume" v-if="educationData">
      <div class="tit">
        <div class="baseResume_left">
        <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/recruit/icon/edu.png" alt="" >
        <div>教育经历</div>
        </div>
      </div>
      <div class="list" >
        <div class="list_item"
          v-for="(item,index) of educationData"
          :key="index"
        >
          <div class="list_item_top">
            <div class="school"><span>{{item.name}}</span> <span>{{item.education}}</span></div>
          </div>
          <div class="list_item_bottom">
            <div>{{item.start_time}}&nbsp;至&nbsp;</div>
            <div>&nbsp;{{item.end_time}}&nbsp;</div>
            <div>&nbsp;|&nbsp;{{item.professional_name}}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 教育经历结尾 -->

    <!-- 工作经历 -->
    <div class="expResume" v-if="exprienceData">
      <div class="tit">
        <div class="baseResume_left">
        <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/recruit/icon/exp.png" alt="" >
        <div>工作经历</div>
        </div>
      </div>
      <div class="list">
        <div class="list_item" v-for="(item,index) of exprienceData" :key="index">
          <div class="list_item_top">
            <div class="company">{{item.name}} </div>
          </div>
          <div class="list_item_bottom">
            <div>{{item.job_title}} |</div>
            <div>{{item.start_time}} 至</div>
            <div>{{item.end_time}}</div>
          </div>
          <div class="list_item_content">
            {{item.desc}}
          </div>
        </div>
      </div>
    </div>
    <!-- 工作经历结尾 -->
  </div>
</template>
<script>
import {Toast} from 'vant'



export default {
  name:'resume',
  data(){return{
    initData:'',
    sex:'',
    id:''
  }},
  computed: {
    educationData(){
      if(this.initData.edu && this.initData.edu.length!=0){
        this.initData.edu.map((val)=>{
          val.start_time=val.start_time.split(' ')[0]
          val.end_time=val.end_time.split(' ')[0]
        })
        return this.initData.edu
      }else{
        return ''
      }
    },
    exprienceData(){
      if(this.initData.work && this.initData.work.length!=0){
        this.initData.work.map((val)=>{
          val.start_time=val.start_time.split(' ')[0]
          val.end_time=val.end_time.split(' ')[0]
        })
        return this.initData.work
      }else{
        return ''
      }
    }
  },
  methods: {
    async getresume(){
      // var userToken=wx.getStorageSync('userToken')
     const res=await this.$axios('/resume/resumeDetail',
                          { params:{
                            'resume_id':this.id,
//                              user_token: window.localStorage.getItem('userToken') || "U2FsdGVkX19y24cVFB8MD7PTQtVPntV+j+6ISIWcxNA32klm+SCk3xpdhXDkvkoMY9T0bCBsBGWN9QAeMU7wCg==",
                          }});

    console.log(res);

     if(res.data.level=='success'){
       this.initData=res.data.data
       console.log(res.data.data);
       this.sex=this.$currency.sexTag1(res.data.data.user_info.sex)
     }else{//为认证要先认证
       Toast(res.data.message,'none',1500)
       setTimeout(()=>
       {
        //  this.$currency.redirectTo('/pages/memberCenter/authentication/main')
        this.$router.push({ name: "authentication" })
       },1500)
     }
    }
  },
  activated() {
    this.id=this.$route.query.id
    this.getresume()
  },
  // onLoad(options){
  //   this.id=options.id
  //   this.initData=''
  //   this.getresume()
  // }
}
</script>
<style scoped>
   .resume{
    width:100%;
    background: #eee;
  }
  .baseResume{
    background: #fff;

  }
  .wantResume{
    background: #fff !important;
    margin-top:20px;
    margin-bottom: 20px;
  }
  .desResume{
    background: #fff !important;
    margin-top:50px;
  }
  .eduResume,.expResume,.labelResume{
    background: #fff !important;
    margin-top:20px;
  }

  .tit{
    width:100%;
    display: flex;
    background: #fff !important;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    padding:20px 0;
  }
  .tit>div{
    display: flex;
    justify-content: space-between;
    align-items:center;
    margin:0 20px;
  }
  .tit>div img{
    width: 20px;
    height: 20px;
    margin:0 10px;
  }
  .baseResume_left,.baseResume_right{
    display: flex;
    justify-content:center;
    align-items:center;
  }
  .content{
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding:10px 20px;
  }

  .content img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 20px;

  }
  .content desc{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }
  .list >div{
    display: flex;
    flex-wrap: wrap;
  }
  .list_item >div{
    width: 100%;
    padding:15px 20px 15px 20px;
  }
  .list_item >div>span:nth-child(1){
    width: 80px;
    display: inline-block;
    margin-right:40px;
  }


  .desResume_item{
    display: block;
    background: #fff;
    padding:15px 50px 15px 20px;
  }
  .school{
    display: flex;
    justify-content: center;
    align-content: center
  }

  .eduResume img, .expResume img{
    width: 20px;
    height: 20px;
  }
  .list_item_content{
    padding-left:10px !important;
  }
  .list_item {
    border-bottom: 1px solid #eee;
  }
  .eduResume .list_item ,.expResume .list_item{
    flex-wrap: wrap;
    padding:5px 0;
  }
  .edu_icon img ,.exp_icon img{
    margin:0 5px
  }
   .list_item_top,.list_item_bottom{
    display: flex;
    justify-content: space-between;
    padding:0 0 0 20px !important;
  }
   .list_item_bottom{
    justify-content: flex-start;
  }

  .labelResume_item{
    display: flex;
    padding:10px 0;
    justify-content: space-around;
  }
  .labelResume_item>div{
  padding:2px 5px;
  border-radius: 10px;
  margin-right:10px;
}
.labelResume_item>div:nth-child(1){
  background: #fef5da;
  color: #ea994e;
}
.labelResume_item>div:nth-child(2){
    background: #daf2fe;
    color: #30a2c8;
}
.labelResume_item>div:nth-child(3){
    background: #e4fcdc;
    color: #76af58;
}
.labelResume_item>div:nth-child(4){
    background: #ebebeb;
    color: #868686;
}

/* 头部 */
  header{
    background: #fff;
    position: relative;
    width: 100%;
    height:200px;
    border-bottom: 1px solid #eee;

  }
  .header_background{
    background-image: linear-gradient(-135deg, #57D1E2 0%, #37AED6 100%) !important;
    height: 110px;
    width: 100%
  }
  .header_wrapper{
    position: absolute;
    bottom: 55px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    padding:10px;
    border-radius: 50%;
    background: #fff;
  }
  header img{
    width:60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
  }
  header .desc>div{
    margin:2.5px 0;
  }
  header .desc{
    position: absolute;
    text-align: center;
    width: 100%;
    bottom: 10px;

  }
  .concat{
    background: #fff !important;
  }
  .concat .list_item >div>span:nth-child(1){
    width: 80px;
    display: inline-block;
    margin-right:10px;
  }
  .abilityList{
    display: flex;
    flex-wrap: wrap;

  }
  .abilityList >div{
    padding:5px 20px;
    margin:15px;
    border-radius: 10px;
  }
  .abilityList >div:nth-child(1){
    background: #e4fcdc;
    color: #76af58
  }
  .abilityList >div:nth-child(2){
    background: #daf2fe;
    color: #30a2c8;
  }
  .abilityList >div:nth-child(3){
    background: #ebebeb;
    color: #868686
  }
  .abilityList >div:nth-child(4){
    background: #ffe7db;
    color: #d15b34
  }
  .abilityList >div:nth-child(5){
    background: #ffe7db;
    color: #d15b34
  }
</style>
